<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

<!--图标样式-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />

<!--主要样式-->
<link rel="stylesheet" type="text/css" href="css/style.css" />

<!--<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>-->
<script src="../jQueryAssets/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="../jQueryAssets/jquery-ui-1.9.2.button.custom.min.js" type="text/javascript"></script>
<script src="../jQueryAssets/jquery-ui-1.9.2.progressbar.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
var lastspan;//用于存储最近一次操作的span
$(function(){
    $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
    $('.tree li.parent_li > span').on('click', function (e) {
        var children = $(this).parent('li.parent_li').find(' > ul > li');//">"为层次选择器，">ul"表示直接ul子节点，">ul>li"表示直接ul子节点下的直接li子节点
        if (children.is(":visible")) {
            children.hide('fast');
            $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
        } else {
            children.show('fast');
            $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
        }
		
        e.stopPropagation();
    });
	
	var myspan = document.getElementsByTagName("span");
	for(var i = 0, len = myspan.length; i < len; i++){
		//myspan[i].style.backgroundColor = "#FFFF00";
            myspan[i].onclick = function(){
				if($(this).find('>i').hasClass("icon-leaf")){//判断点击的span是否为最底层节点，若为最底层节点则进行显示操作
				/*innerHTML为标签内的内容（包含所有内容<a></a>等标签也包含）；innerText为标签内的Text内容，不包含内部标签*/
				document.getElementById('rightpage-title').innerHTML = this.innerText;
				//$(this).attr("color",rgba(252,2,6,1.00));
				
				//document.getElementById('critty').style.backgroundColor = "#FFFF00";
				
				/*进行点击操作之后，现将所有的span背景颜色置为白色（避免上次点击对这次点击造成影响），然后将当前点击的span背景置为黄色*/
				/*for(var j = 0, len = myspan.length; j < len; j++){
						myspan[j].style.backgroundColor = "#FFFFFF";
				}*/
				if(lastspan!=undefined){//判断变量是否赋值,若未赋值（即初始化时）则不进行任何操作，若已赋值，则进行相关操作
				lastspan.css("backgroundColor","white");
				}
				$(this).css("backgroundColor","yellow");//用CSS改变SPAN的背景颜色
				lastspan = $(this);
				//alert(lastspan);
				
				//$myspan[i].hasClass("className") ? console.log("Has this class.") : console.log("Do not has this class.");
				
				//$(this).find('>i').hasClass("icon-leaf") ? alert("Has this class.") : alert("Do not has this class.");//获取span元素下的i子节点，并判断i子节点是否含有‘icon-leaf’类型的CSS样式
				
				//alert(this.childNodes.length);
                //alert(i + "----" + this.innerHTML);
            }
			}
        }
	
});
</script>

<style type="text/css">
.left-side {
	float: left;
	width: 29%;
	border-right: thin solid rgba(221,220,220,1.00);
	height:900px;
	margin-left: 2px;
	min-height: 0px;
	overflow-y: visible;
	overflow-x: visible;
	border-spacing: 0px 5px;
}
.right-side{
	float: right;
	width: 70%;
	top: auto;
	display: inline;
	overflow-x: visible;
	overflow-y: visible;
}
.buttonposition{
	width:10%;
	margin-left:12%;
	}
.imgstyle{
	width:19.5%;
	height:19.5%;
	margin-left:2%;
	margin-right:2%;
	margin-top:2%;
	margin-bottom:2%;
	}
</style>
<link href="../jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="../jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="../jQueryAssets/jquery.ui.button.min.css" rel="stylesheet" type="text/css">
<link href="../jQueryAssets/jquery.ui.progressbar.min.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="left-side" id="leftpage">
<div class="tree well">
<ul>
	<li>
		<span id="parent-span"><i class="icon-folder-open"></i> Parent</span> <a href="">Goes somewhere</a>
		<ul>
			<li>
			  <span id="critty"><i class="icon-minus-sign"></i> Child</span> <a href="">Goes somewhere</a>
				<ul>
					<li>
					  <span><i class="icon-leaf"></i> Grand Child</span>						<a href="">Goes somewhere</a>
					</li>
                    <li>
						<span><i class="icon-leaf"></i> Grand Child</span>						<a href="">Goes somewhere</a>
					</li>
                    <li>
						<span><i class="icon-leaf"></i> Grand Child</span>						<a href="">Goes somewhere</a>
					</li>
				</ul>
			</li>
            <li>
				<span><i class="icon-minus-sign"></i> Child</span> <a href="">Goes somewhere</a>
				<ul>
					<li>
						<span><i class="icon-leaf"></i> Grand Child</span>						<a href="">Goes somewhere</a>
					</li>
                    <li>
						<span><i class="icon-leaf"></i> Grand Child</span>						<a href="">Goes somewhere</a>
					</li>
                    <li>
						<span><i class="icon-leaf"></i> Grand Child</span>						<a href="">Goes somewhere</a>
					</li>
				</ul>
			</li>
            <li>
				<span><i class="icon-minus-sign"></i> Child</span> <a href="">Goes somewhere</a>
				<ul>
					<li>
						<span><i class="icon-leaf"></i> Grand Child</span>						<a href="">Goes somewhere</a>
					</li>
                    <li>
						<span><i class="icon-leaf"></i> Grand Child</span>						<a href="">Goes somewhere</a>
					</li>
                    <li>
						<span><i class="icon-leaf"></i> Grand Child</span>						<a href="">Goes somewhere</a>
					</li>
				</ul>
			</li>
			<li>
				<span><i class="icon-minus-sign"></i> Child</span> <a href="">Goes somewhere</a>
				<ul>
					<li>
						<span><i class="icon-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a>
					</li>
					<!--<li>
						<span><i class="icon-minus-sign"></i> Grand Child</span> <a href="">Goes somewhere</a>
						<ul>
							<li>
								<span><i class="icon-minus-sign"></i> Great Grand Child</span> <a href="">Goes somewhere</a>
								<ul>
									<li>
										<span><i class="icon-leaf"></i> Great great Grand Child</span> <a href="">Goes somewhere</a>
									</li>
									<li>
										<span><i class="icon-leaf"></i> Great great Grand Child</span> <a href="">Goes somewhere</a>
									</li>
								 </ul>
							</li>
							<li>
								<span><i class="icon-leaf"></i> Great Grand Child</span> <a href="">Goes somewhere</a>
							</li>
							<li>
								<span><i class="icon-leaf"></i> Great Grand Child</span> <a href="">Goes somewhere</a>
							</li>
						</ul>
					</li>-->
					<li>
						<span><i class="icon-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a>
					</li>
                    <li>
						<span><i class="icon-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a>
					</li>
                    <li>
						<span><i class="icon-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a>
					</li>
                    <li>
						<span><i class="icon-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a>
					</li>
                    <li>
						<span><i class="icon-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a>
					</li>
				</ul>
			</li>
            <li>
				<span><i class="icon-minus-sign"></i> Child</span> <a href="">Goes somewhere</a>
				<ul>
					<li>
						<span><i class="icon-leaf"></i> Grand Child</span>						<a href="">Goes somewhere</a>
					</li>
                    <li>
						<span><i class="icon-leaf"></i> Grand Child</span>						<a href="">Goes somewhere</a>
					</li>
                    <li>
						<span><i class="icon-leaf"></i> Grand Child</span>						<a href="">Goes somewhere</a>
					</li>
				</ul>
			</li>
		</ul>
	</li>
	
</ul>
</div>
</div>

<div class="right-side" id="rightpage">
  <p id="rightpage-title" style="text-align:center;font-size:24px;margin-top:1%">此处显示  class "right-side" id "rightpage" 的内容</p>
  <p id="imgshow" style="min-height:500px;border-bottom: thin solid rgba(210,210,210,1.00);">
  <img src="../pic/title.png" alt="" class="imgstyle"/>
  <img src="../pic/title.png" alt="" class="imgstyle"/>
  <img src="../pic/title.png" alt="" class="imgstyle"/>
  <img src="../pic/title.png" alt="" class="imgstyle"/><br>
  <img src="../pic/title.png" alt="" class="imgstyle"/>
  <img src="../pic/title.png" alt="" class="imgstyle"/>
  <img src="../pic/title.png" alt="" class="imgstyle"/>
  <img src="../pic/title.png" alt="" class="imgstyle"/><br>
  <img src="../pic/title.png" alt="" class="imgstyle"/>
  <img src="../pic/title.png" alt="" class="imgstyle"/>
  <img src="../pic/title.png" alt="" class="imgstyle"/>
  <img src="../pic/title.png" alt="" class="imgstyle"/><br>
  </p>
  <p>
  <!-- 给这个input 设置样式隐藏，切忌不可用display控制隐藏,可能不能跨浏览器 -->  
    <!--<input type="file" id="file" onchange="getFilePath()" style="filter:alpha(opacity=0);opacity:0;width: 0;height: 0;"/>-->
    <iframe style="display:none" name="hidden_iframe" ></iframe><!--隐藏帧-->
	<form id="upload-form" style="filter:alpha(opacity=0);opacity:0;width: 0;height: 0;" action="upload.php" method="POST"  enctype="multipart/form-data" style="margin:15px 0" target="hidden_iframe">
    <input type="hidden" name="<?php echo ini_get("session.upload_progress.name"); ?>" value="test" />
    <p><input type="file" name="myfile" onchange="getFilePath()"/></p>
    <p><input type="submit" value="Upload" /></p>
	</form>  
  	<!--<button id="Button1" class="buttonposition" onClick="selectFile()">浏览</button>-->
    <button id="Button1" class="buttonposition">浏览</button>
	<button id="Button2" class="buttonposition">上传</button>
    <button id="Button3" class="buttonposition">拆分</button>
    <button id="Button4" class="buttonposition">应用</button>
  </p>
  <p id="detail" style="text-align:center">显示信息</p>
  <div id="Progressbar1"></div>
</div>
<script type="text/javascript">
$(function() {
	$( "#Button1" ).button().click(function(){
		selectFile();//点击按钮时触发选择文件操作
		}); 
});
$(function() {
	$( "#Button2" ).button().click(function(){
		sendFile();
		}); 
});
$(function() {
	$( "#Button3" ).button(); 
});
$(function() {
	$( "#Button4" ).button(); 
});

/*选择文件函数*/
function selectFile(){  
   //触发 文件选择的click事件  
   //$("#file").trigger("click");  
   $( "#Progressbar1" ).progressbar("value", 0); //初始化进度条
   $("input[name='myfile']").trigger("click");
    }  
	
	/*提交表单函数，即上传文件函数*/
function sendFile(){  
   //触发 文件选择的click事件  
   //$("#file").trigger("click");  
   $("#upload-form").trigger("submit");
    }  
              
/* 获取 文件的路径 ，用于测试*/  
function getFilePath(){  
    //alert($("input[name='myfile']").attr("value")); //弹出对话框显示文件路劲
	$("#detail").html("已选择的文件为："+$("input[name='myfile']").attr("value"));
    }
$(function() {
	$( "#Progressbar1" ).progressbar(); 
});

function fetch_progress(){
    $.get('progress.php',{ '<?php echo ini_get("session.upload_progress.name"); ?>' : 'test'}, function(data){
        var progress = parseInt(data);
        $("#detail").html("文件已上传："+progress + '%');
		$( "#Progressbar1" ).progressbar("option", "value", progress); //进度条动态改变
        if(progress < 100){
            setTimeout('fetch_progress()', 20);    //当上传进度小于100%时，显示上传百分比
        }else if(progress==100){
            $("#detail").html('文件上传完成!'); //当上传进度等于100%时，显示上传完成
        }
    }, 'html');
}

$('#upload-form').submit(function(){
    $('#Progressbar1').show();
    setTimeout('fetch_progress()', 20);//每0.1秒执行一次fetch_progress()，查询文件上传进度
});

</script>
</body>
</html>
